<template>
  <div class="table">
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      highlight-current-row
      border
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="序号" type="index"> </el-table-column>
      <el-table-column
        show-overflow-tooltip
        v-for="item in tableLabel"
        align="center"
        :key="item.prop"
        :label="item.label"
        :sortable="item.prop == 'id' || item.prop == 'type' ? true : false"
        :sort-method="sort"
      >
        <template slot-scope="scope">
          <template v-if="item.prop == 'type'">
            <span v-if="scope.row[item.prop] == '1'" style="color: #62ff00">
              充值
            </span>
            <span v-else-if="scope.row[item.prop] == '2'" style="color: red">
              扣款
            </span>
            <span
              v-else-if="scope.row[item.prop] == '3'"
              style="color: #00ccff"
            >
              代付
            </span>
            <span
              v-else-if="scope.row[item.prop] == '4'"
              style="color: #ffb700"
            >
              退款
            </span>
            <span
              v-else-if="scope.row[item.prop] == '5'"
              style="color: #0040ff"
            >
              冲正
            </span>
          </template>
          <template v-else-if="item.prop == 'variableAmount'">
            <span :style="scope.row[item.prop] > 0 ? zhen : fu">
              {{ scope.row[item.prop] }}
            </span>
          </template>
          <template v-else-if="item.prop == 'operator_role'">
            <span v-if="scope.row[item.prop] == '1'" style="color: #62ff00">
              管理员
            </span>
            <span v-else-if="scope.row[item.prop] == '2'" style="color: red">
              商户
            </span>
            <span
              v-else-if="scope.row[item.prop] == '3'"
              style="color: #00ccff"
            >
              卡商
            </span>
          </template>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zhen: {
        color: "#62ff00",
      },
      fu: {
        color: "#ff0000",
      },
    };
  },
  props: {
    tableData: Array,
    tableLabel: Array,
  },

  methods: {
    sort(a, b) {
      return a - b;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style>
.table {
  margin-top: 20px;
}
.fu {
  color: #ff0000;
}
.zhen {
  color: #62ff00;
}
</style>